<template>
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="采购单号" prop="采购单号">
              <el-input
                v-model="queryParams.采购单号"
                placeholder="请输入采购订单号"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="采购单号" prop="采购单号">
              <el-input
                v-model="queryParams.采购单号"
                placeholder="请输入采购单号"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="合同号" prop="合同号">
              <el-input
                v-model="queryParams.合同号"
                placeholder="请输入合同号"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="采购部门" prop="采购部门">
              <el-input
                v-model="queryParams.采购部门"
                placeholder="请输入采购部门"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="采购类别" prop="采购类别">
              <el-input
                v-model="queryParams.采购类别"
                placeholder="请输入采购类别"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
            
          </el-form>
          
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
              >新增</el-button>
            </el-col>
            <!-- <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
              >修改</el-button>
            </el-col> -->
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
              >删除</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
              >导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
          </el-row>

      <el-tooltip placement="top">
      <div slot="content">点击任意一行列，即可在下方查看订单明细记录</div>
      <el-table :data="orderdata" v-loading="loading" @row-click="showTab">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="采购单号" prop="RequestorderNo"></el-table-column>
        <el-table-column label="采购类型" prop="requestType"></el-table-column>
        <el-table-column label="合同号" prop="contractNo"></el-table-column>
        <el-table-column label="采购部门" prop="requestDept"></el-table-column>
        <el-table-column label="采购日期" prop="requestDate"></el-table-column>
        <el-table-column label="采购人" prop="requestman"></el-table-column>
        <el-table-column label="类别名称" prop="requestname"></el-table-column>
        <el-table-column label="操作" align="center" width="150px" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tooltip>
    <el-dialog title="编辑" :visible.sync="open" width="30%" center>
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
              <el-form-item label="采购单号" prop="采购单号">
                <el-input v-model="form.RequestorderNo" placeholder="请输入采购单号"></el-input>
              </el-form-item>
              <el-form-item label="采购类型" prop="采购类型">
                <el-input v-model="form.requestType" placeholder="请输入采购类型"></el-input>
              </el-form-item>
              <el-form-item label="合同号" prop="合同号">
                <el-input v-model="form.contractNo" placeholder="请输入合同号"></el-input>
              </el-form-item>
              <el-form-item label="采购部门" prop="采购部门">
                <el-input v-model="form.requestDept" placeholder="请输入采购部门"></el-input>
              </el-form-item>
              <el-form-item label="采购日期" prop="采购日期">
                <!-- <el-datw-picker v-model="form.采购日期" type="date" placeholder="请输入采购日期"></el-datw-picker> -->
                <el-input v-model="form.requestDate" placeholder="请输入采购日期"></el-input>
              </el-form-item>
              <el-form-item label="采购人" prop="采购人">
                <el-input v-model="form.requestman" placeholder="请输入采购人"></el-input>
              </el-form-item>
              <el-form-item label="类别名称" prop="类别名称">
                <el-input v-model="form.requestname" placeholder="请输入类别名称"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
    </el-dialog>

     <pagination :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"
      :total="total" /> 
      
      <el-tabs v-model="activeName" v-if="showCard" >
          <el-tab-pane label="订单明细" name="first">
            <h2 align="center">{{ RequestorderNo }}订单明细</h2>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddComm">新增明细</el-button>
              </el-col>
            </el-row>
            <el-table :data="detailedData" v-loading="loading">
              <el-table-column label="物品描述" align="center">
                <el-table-column prop="itemId" label="代号" align="center" />
                <el-table-column prop="name" label="名称" align="center" />
                <el-table-column prop="size" label="规格" align="center" />
                <el-table-column prop="texture" label="材质" align="center" />
                <el-table-column prop="conversion" label="转化率" align="center" />
                <el-table-column prop="packages" label="包装数" align="center" />
              </el-table-column>
              <el-table-column prop="price" label="单位价格" align="center" />
              <el-table-column prop="attribute" label="属性" align="center" />
              <el-table-column prop="color" label="颜色" align="center" />
              <el-table-column prop="bar" label="条形码" align="center" />
              <el-table-column prop="delivery" label="交期" align="center" />
              <el-table-column prop="validity" label="有效期" align="center" />
              <el-table-column prop="original" label="原价" align="center" />
              <el-table-column prop="rate" label="折扣率" align="center" />
              <el-table-column prop="plan" label="计划单价" align="center" />
              <el-table-column label="主单位" align="center">
                <el-table-column prop="company1" label="单位" align="center" />
                <el-table-column prop="quantity1" label="数量" align="center" />
              </el-table-column>
              <el-table-column label="副单位" align="center">
                <el-table-column prop="company2" label="单位" align="center" />
                <el-table-column prop="quantity2" label="数量" align="center" />
              </el-table-column>
            <el-table-column prop="other" label="其他费用" align="center" />
            <el-table-column prop="remark" label="备注" align="center" />
            <el-table-column prop="packages" label="操作" align="center" width="150px" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateComm(scope.row)">修改</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
          <el-tab-pane label="订单要求">
            <el-divider><i >特殊要求及其他</i></el-divider>
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容"
              v-model="textarea">
           </el-input>
           <el-row :gutter="20">
           <el-col :xs="24" :sm="6" >
            <div>正唛</div>
           <el-input type="textarea" :rows="4" v-model="input1" placeholder="" ></el-input>
           </el-col>
           <el-col :xs="24" :sm="6" >
            <div>侧唛</div>
           <el-input type="textarea" :rows="4"  v-model="input2" placeholder=""></el-input>
           </el-col>
           <el-col :xs="24" :sm="12" >
            <div>前唛</div>
           <el-input type="textarea" :rows="4" v-model="input3" placeholder=""></el-input>
           </el-col>
           </el-row>
          </el-tab-pane>
          </el-tabs> 
        </el-col>        
      </el-row>
      <el-dialog :title="titleComm" :visible.sync="openComm" width="800px" append-to-body>
       <el-form :model="formComm" :rules="rulesComm" ref="formComm" label-width="100px">
        <el-row>
          <el-col :span="12">
         <el-form-item label="代号" prop="itemId">
           <el-input v-model="formComm.itemId" placeholder="请输入代号" style="width: 240px;" />
         </el-form-item>
         </el-col>
         <el-col :span="12">
         <el-form-item label="名称" prop="name">
           <el-input v-model="formComm.name" placeholder="请输入名称" style="width: 240px;" />
         </el-form-item>
         </el-col>
         </el-row>
         <el-row>
          <el-col :span="12">
         <el-form-item label="规格" prop="size">
           <el-input v-model="formComm.size" placeholder="请输入规格" style="width: 240px;" />
         </el-form-item>
         </el-col>
         <el-col :span="12">
         <el-form-item label="单位" prop="company1">
           <el-input v-model="formComm.company1" placeholder="请输入单位" style="width: 240px;" />
         </el-form-item>
         </el-col>
         </el-row>
         <el-row>
          <el-col :span="12">
         <el-form-item label="有效期" prop="validity">
           <el-input v-model="formComm.validity" placeholder="请输入有效期" style="width: 240px;" />
         </el-form-item>
         </el-col>
         <el-col :span="12">
         <el-form-item label="数量" prop="quantity1">
           <el-input v-model="formComm.quantity1" placeholder="请输入数量" style="width: 240px;" />
         </el-form-item>
         </el-col>
         </el-row>
         <el-form-item label="备注" prop="remark">
           <el-input type="textarea" v-model="formComm.remark" placeholder="请输入备注" maxlength="30" show-word-limit />
         </el-form-item>
         <el-row>
          <el-col :span="12">
         <el-form-item label="生产要求" prop="productionRequirements">
           <el-input type="textarea" resize="none" style="width: 240px;" :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
              v-model="formComm.productionRequirements">
            </el-input>
         </el-form-item>
         </el-col>
         <el-col :span="12">
         <el-form-item label="生产工艺" prop="productionTechnique">
           <el-input type="textarea" style="width: 240px;" :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
              v-model="formComm.productionTechnique">
            </el-input>
         </el-form-item>
         </el-col>
         </el-row>
         <el-row>
          <el-col :span="12">
         <el-form-item label="正唛" prop="frontMark">
           <el-input type="textarea" style="width: 240px;" :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
              v-model="formComm.frontMark">
            </el-input>
         </el-form-item>
         </el-col>
         <el-col :span="12">
         <el-form-item label="侧唛" prop="sideMark">
           <el-input type="textarea" style="width: 240px;" :autosize="{ minRows: 7, maxRows: 10 }" placeholder="请输入内容"
              v-model="formComm.sideMark"></el-input>
         </el-form-item>
         </el-col>
        </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFormComm">确 定</el-button>
          <el-button @click="cancelComm">取 消</el-button>
      </div>
     </el-dialog>
    </div>
</template>


  
   <script>
   export default{
    data() {
      return {
        title:null,
         titleComm:null,
        total:0,
        open:false,
        openComm:false,
        form:{},
        formComm:{},
        rules:{},
        rulesComm:{},
        orderNo: '',
        textarea: '',
        input1: '',
        input2: '',
        input3: '',
        orderNo: '',
      showCard: true,
      activeName: 'first',
      orderdata: [{
        orderNo: 'DM123456',
       
        requestDept: '包装车间',
        RequestorderNo: 'QGD1811191879',
        requestDate: '2021-01-01',
        requestType: '按单采购',
        requestman: '业务员A',
        requestname: '外箱(WX)',
        contractNo: 'OD298765545',
      }, {
        orderNo: ':QGD2411190001',
          
        requestDept: '密胺生产部',
        RequestorderNo: 'QGD2411190001',
          requestDate: '2024-10-16',
          requestType: '批量采购',
        requestman: '何月洪',
        requestname: '产品条码(CT)',
          contractNo: 'OD298769775',
         
        }, {
        orderNo: ':QGD2411190002',
          
        requestDept: '成品生产部',
        RequestorderNo: 'QGD2411190002',
          requestDate: '2024-12-16',
          requestType: '批量采购',
        requestman: '业务员B',
        requestname: '白纸(BZ)',
          contractNo: 'OD298785214',
         
        }],

        loading: false,
        dialogVisible: false,
        editForm: {
      //     orderNo: 'DM123456',
       
      //  requestDept: '包装车间',
      //  RequestorderNo: 'QGD1811191879',
      //  requestDate: '2021-01-01',
      //  requestType: '按单采购',
      //  requestman: '业务员A',
      //  requestname: '外箱(WX)',
      //  contractNo: 'OD298765545',
       }, 

        detailedData: [{
          itemId: 'WX-YL15118',
          name: 'YL15118外箱',
          size: '',
          texture: '',
          conversion: '1',
          packages: '0',
          price: '0',
          attribute: '外销',
          color: '',
          bar: '',
          delivery: '2023/12/02',
          validity: '2023/12/31',
          original: '0',
          rate: '1',
          plan: '',
          company1: '个',
          quantity1: '300',
          company2: '个',
          quantity2: '300',
          other: '',
          remark: ''
        }, {
          itemId: 'CT-YL018716',
          name: '托盘',
          size: '',
          texture: '',
          conversion: '1',
          packages: '0',
          price: '0',
          attribute: '',
          color: '',
          bar: '',
          delivery: '2023/12/02',
          validity: '2023/12/31',
          original: '0',
          rate: '1',
          plan: '',
          company1: '张',
          quantity1: '1800',
          company2: '张',
          quantity2: '1800',
          other: '',
          remark: ''
        },{
          itemId: 'BZ-YL019714',
          name: '圆盘',
          size: '',
          texture: '',
          conversion: '1',
          packages: '0',
          price: '0',
          attribute: '',
          color: '',
          bar: '',
          delivery: '2023/12/02',
          validity: '2023/12/31',
          original: '0',
          rate: '1',
          plan: '',
          company1: '张',
          quantity1: '1800',
          company2: '张',
          quantity2: '1800',
          other: '',
          remark: ''
        }],

        // pickerOptions: {
        //   disabledDate(time) {
        //     return time.getTime() > Date.now();
        //   },
        // },
          // value1: "",
          // value2: "",
        
        defaultProps: {
            children: 'children',
            label: 'label'
        },

        total: 0,
      loading: false,
      radio: 3,
        queryParams:{
          date1: '',
        date2: '',
        radio: 3,
        radio1: 3,
        radio2: 3,
        radio3: 3,
        radio4: 3,
        radio5: 3,
        },
        showSearch: true,
        single: false,
        multiple: false,
        tableData:[],
      }
    },
    methods: {
      showTab(row) {
      this.orderNo = row.orderNo;
      this.showCard = true;
      console.log('Clicked row:', row);
    },
    handleEdit(row) {
      this.currentEditRow = { ...row }; // 深拷贝当前行数据到editForm
      this.open= true; // 或者直接赋值，取决于你是否需要在关闭弹窗时重置表单
      this.dialogVisible = true;
    },
    // handleUpdate() {
    //   // const index = this.orderdata.findIndex(item => item.RequestorderNo === this.currentEditRow.RequestorderNo);
    //   // if (index !== -1) {
    //   //   this.$set(this.orderdata, index, { ...this.editForm }); // 使用$set来确保响应性
    //   // }
    //   // this.dialogVisible = false;
    //   this.open = { ...row };
    //   this.dialogVisible = true;
    // },

    submitForm(){
      this.open = false;
    },
    cancel(){this.open = false;},
    handleQuery() {
      this.loading = false;
    },
      filterNode(value, data) {
          if (!value) return true;
          return data.label.indexOf(value) !== -1;
        },
        handleNodeClick(data){
          console.log(data);
        },
        handleAdd() {
          this.title = '新增'
          this.open = true;
          this.isEdit = false;
        },
          handleUpdate(row) {
          this.title = '编辑订单'
          this.open = true;
          this.isEdit = false;
          this.form = row;
        },
         handleAddComm(){
           this.titleComm = '新增订单明细'
           this.openComm = true;
         },
         handleUpdateComm(row){
            this.titleComm = '编辑订单明细'
            this.openComm = true;
            this.formComm = row;
          },
    submitFormComm(){
      this.openComm = false;
    },
    cancelComm(){this.openComm = false;},
    showTab(row) {
      this.showCard = true
    },

        handleDelete(){},
        handleExport(){},
        handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.userId);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
    },
    
   }
   </script>

<style lang="scss" scoped>
.radio-group .el-radio {
  margin-right: 0px;
}

.radio-group {
  border-radius: 1px;
  border: 1px solid #dcdfe6;
}
</style>
